<template>
  <top-item title="今日销售额" :value="numberFormat(salesToday)">
    <template #default>
      <div class="content">
        日同比 <span>{{ salesGrowthLastDay }}%</span>
      </div>
      <div class="content">
        月同比 <span>{{ salesGrowthLastMonth }}% </span>
      </div>
    </template>
    <template #footer>
      <div class="footer">
        昨日销售额 <span>{{ moneyFormat(salesLastDay) }}</span>
      </div>
    </template>
  </top-item>
</template>

<script setup lang="ts">
import { onMounted, watch, computed } from 'vue'
import topItem from './top-item.vue'
import * as echarts from 'echarts'
import { useReportInfoData } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
const { numberFormat, moneyFormat } = useFormat()

const reportInfoDataStore = useReportInfoData()

const salesToday = computed(() => reportInfoDataStore.reportData.salesToday)
const salesLastDay = computed(() => reportInfoDataStore.reportData.salesToday)
const salesGrowthLastDay = computed(() => reportInfoDataStore.reportData.salesGrowthLastDay)
const salesGrowthLastMonth = computed(() => reportInfoDataStore.reportData.salesGrowthLastMonth)

</script>

<style scoped>
.content {
  font-size: 12px;
  font-weight: bold;
  color: #666;
  line-height: 2em;
}
</style>